<template>
    <section :class="$style.root">
        <div :class="$style.section">
            <div :class="$style.shadow">
                <span :class="$style.headline">Data Foundry</span>
                <h1 :class="$style.title">{{ $t('langObj.dataSet') }}</h1>
                <div :class="$style.subtitle">{{ $t('langObj.platformDesc') }}</div>
            </div>
            <article :class="$style.article">
                <div :class="$style.filters">
                    <Select v-model="filter.filterBy" style="width:100px">
                        <Option value="keyword">{{ $t('langObj.keyword') }}</Option>
                        <Option value="label">{{ $t('langObj.label') }}</Option>
                    </Select>
                    <Input v-model="filter.inputValue" style="width:200px" />
                    <Button icon="ios-search" @click="handleSearch">{{ $t('langObj.search') }}</Button>
                    <Button icon="ios-trash-outline" @click="handleClean">{{ $t('langObj.clear') }}</Button>
                </div>
                <div>
                    <Button type="primary" @click="handleViewHistory">{{ $t('langObj.usehistory') }}</Button>
                </div>
            </article>
            <figure>
                <data-item :class="$style.dataHover" v-for="item in finalData" :key="item.dataId" :data="item" @click.native="handleClickDataItem(item.dataId)"></data-item>
            </figure>
        </div>
    </section>
</template>

<script>
import dataItem from "@/components/datalab/dataItem";
import { mapActions } from 'vuex';
export default {
    components:{dataItem},
    data() {
        return {
            finalData:[],
            filter: {
                filterBy: "keyword",
                inputValue: ""
            }
        }
    },
    methods: {
        ...mapActions(['XgetDatalabList','XsearchData']),
        handleSearch(){
            this.XsearchData(this.filter).then(res => {
                this.finalData = res.data.reverse()
            })
        },
        handleClean(){
            this.filter = {
                filterBy: "keyword",
                inputValue: ""
            };
            this.pageMounted();
        },
        handleViewHistory(){
            this.$router.push({path:"/personal/myProject"});
        },
        handleClickDataItem(id){
            this.$router.push({path:`/datalab/${id}`});
        },
        pageMounted(){
            this.XgetDatalabList().then(res => {
                this.finalData = res.data.reverse()
            })
        }
    },
    mounted() {
       this.pageMounted();
    },
}
</script>

<style module>
    .root{
        flex:1;
        min-width: 1200px;
        padding: 20px;
        background-color:#f9fafa;
        background-image: url(../../assets/images/data-bg.png);
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-size: 100% 906px;
    }
    .section {
        width: 1200px;
        margin: 0 auto;
    }

    .shadow{
        height:256px;
        padding:50px;
        background:rgba(255,255,255,1);
        opacity:0.8;
        border-bottom: 1px solid #f7f7f7;
    }

    .headline {
        font-size:12px;
        font-weight:400;
        color:rgba(77,90,106,1);
    }

    .title {
       font-size:40px;
    }

    .subtitle {
        margin-top:20px;
        font-size:18px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .article{
        height: 100px;
        padding:0 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }
    .dataHover:hover{
        cursor: pointer;
        background-color: #f9fafa;
    }
</style>

